<template>
	<view>
		<u-sticky>
			<view>
				<u-tabs ref="uTabs" :list="statusList" :current="statusCurrent" 
				@change="statusChange" :is-scroll="false" active-color="#20cbd4"></u-tabs>
			</view>
		</u-sticky>
		<swiper class="swiper" :current="swiperCurrent" @change="handleSwperChange">
			<swiper-item v-for="(item, index) in statusList" :key="index">
				<scroll-view class="swiper" scroll-y>
					<empty :emptyImg="emptyImg" :emptyTxt="emptyTxt" v-if="isEmpty"></empty>
					<view class="orderItem" v-if="isShow&&!isEmpty" @click="orderDateil(order_item.time_order_id,'')"
						v-for="(order_item,order_idx) in orderList">
						<view class="orderStatus">
							<view class="order_no">No.{{order_item.order_no}}</view>
							<view class="status_txt">{{order_item.status_txt}}</view>
						</view>		
						<view class="goodsBox">
							<view class="goods_img">
								<image :src="order_item.goods_image"></image>
							</view>
							<view class="goods_info">
								<view class="goods_title u-line-2">{{order_item.goods_name}}</view>
								<view class="goods_norms u-line-1">数量：{{order_item.num}}</view>
								<view class="price_box">
									<view style="margin-right: 20rpx;">¥{{order_item.goods_price}}</view>
								</view>
							</view>
						</view>
						<view class="footer">
							<view class="footer_info">
								<view>运费：¥{{order_item.express_price}}</view>
								<view>实付款：¥{{order_item.pay_price}}</view>
							</view>
							<view class="btn_part">
								<block v-for="(btn_item,btn_idx) in order_item.button">
									<u-button style="margin-left: 10rpx;" size="mini" @click.stop="toPage(order_item.pay_price,order_item.time_order_id,btn_item.sign)">{{btn_item.name}}</u-button>
								</block>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" v-if="isShow&&!isEmpty" color="#909399" :margin-top="20"/>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-modal v-model="show"  :show-cancel-button="true" :content="msg" @cancel="cancel" @confirm="confirm"></u-modal>
		<u-modal v-model="modalShow" :show-cancel-button="true" title="支付方式"
			:cancel-style="{color:'#909399'}" @confirm="payConfirm">
			<view class="slot-content">
				<view class="payTime">
					<view>支付剩余时间：</view>
					<view>
						<u-count-down :font-size="25" color="#909399" 
							:separator-size="25" separator-color="#909399"
						:timestamp="3000"></u-count-down>
					</view>
				</view>
				<view class="modelPrice">¥{{pay_price}}
				</view>
				<u-cell-group :border="false">
					<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" 
					:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<u-cell-item :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}"
					:icon-size="50" title="支付宝支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="zhifubao" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!-- <u-cell-item :border-bottom="false" icon="rmb-circle-fill" :icon-style="{color:'#E5383F'}"
					:icon-size="50" title="积分支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="yue" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item> -->
				</u-cell-group>
			</view>
		</u-modal>
		<login-model ref="loginModel"></login-model>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {timeLimitedOrderList,timeLimitedCancel,timeLimitedReceipt,timeLimitedGoPay,wxminiGetOpenid,timeLimitedGoPayGzh,WxTimeLimitedGoPay} from "@/common/api.js";
	export default {
		components: {
			loginModel,
			empty,
			hoverMenu
		},
		data() {
			return {
				statusList: [
					{name: '全部订单'},
					{name: '待付款'},
					{name: '待发货'},
					{name: '待收货'},
					{name: '售后'}
				],
				statusCurrent: 0, 
				swiperCurrent: 0,
				orderList:[],
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				isEmpty:false,
				emptyImg:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/empty_goods.png",
				emptyTxt:"暂无订单",
				isShow:false,
				show:false,
				msg:"",
				sign:"",
				isSearch:false,
				time_order_id:"",
				modalShow:false,
				payType:"weixin",
				pay_price:0
			};
		},
		onLoad: function(option) {
			this.swiperCurrent = option.swiperCurrent;
		},
		onShow: function() {
			this.isShow = false;
			this.orderList=[];
			this.pageStart = 1;
			this.selectOrder();
		},
		onReachBottom: function() {
			if(this.total/(this.pageStart*this.pageSize)>1){
				this.pageStart++;
				this.selectOrder();
			}else{
				this.status = 'nomore';
			}
		},
		onBackPress(e) {
			if(e.from==="backbutton" || e.from==="navigateBack") {
				uni.switchTab({
					url: '/pages/tabBar/user'
				})
				return true
			}
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectOrder(){
				timeLimitedOrderList(this,{page:this.pageStart,limit:this.pageSize,dataType:this.statusCurrent});
			},
			statusChange(index) {
				this.isEmpty = false;
				this.isShow = false;
				this.swiperCurrent = index;
			},
			handleSwperChange(e){
				if(e.detail.current == 4){
					uni.navigateTo({
						url:"/seckill/afterSaleList"
					})
				}else{
					this.isEmpty = false;
					this.isShow = false;
					this.isSearch = true;
					this.statusCurrent = e.detail.current;
					if(this.isSearch){
						this.isSearch = false;
						this.orderList=[];
						this.pageStart = 1;
						this.selectOrder();
					}
				}
			},
			orderDateil(time_order_id){
				uni.navigateTo({
					url:"/user/seckillOrder_detail?order_id="+time_order_id
				})
			},
			toPage(pay_price,id,sign){
				this.time_order_id = id;
				if(sign == "pay"){
					//支付
					var _this = this;
					// #ifdef MP-WEIXIN
					if(uni.getStorageSync("openid")==""){
						console.log(uni.getStorageSync("openid")+"---2===openid")
						uni.getSetting({
							success: function (a) {
								uni.getUserProfile({
									desc:'Wexin',  
									success: function (b) {
										 uni.login({
										    success (res) {
										        if (res.code) {
													wxminiGetOpenid(_this,{code:res.code})
										        } else {
													vm.$u.toast("授权获取失败"); 
										        }
										    }
										})
									}
								});
							}
						});
					}
					if(uni.getStorageSync("openid")!="" && uni.getStorageSync("openid")!="undefined"){
						_this.pay_price = pay_price;
						_this.modalShow = true;
					}
					// #endif
					// #ifdef APP-PLUS
						_this.pay_price = pay_price;
						_this.modalShow = true;
					// #endif
					// #ifdef H5
						let ua = window.navigator.userAgent.toLowerCase()
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							timeLimitedGoPayGzh(_this,{pay_type:'wx_chat',order_id:_this.time_order_id,type:0})
						}
					// #endif
				}else if(sign == "cancel"){
					//取消订单
					this.msg = "您确定要取消此订单吗？";
					this.sign = sign;
					this.show = true;
				}else if(sign == "refund"){
					//售后
					uni.navigateTo({
						url:"/seckill/afterSale?time_order_id="+id
					})
				}else if(sign == "delivery"){
					//查看物流
					uni.navigateTo({
						url:"/user/logistics?order_id="+id+"&type=2"
					})
				}else if(sign == "receipt"){
					//确认收货
					this.msg = "您确定要收货吗？";
					this.sign = sign;
					this.show = true;
				}else{
					uni.navigateTo({
						url:"/user/seckillOrder_detail?order_id="+id
					})
				}
			},
			confirm(){
				this.show = false;
				if(this.sign == "cancel"){
					timeLimitedCancel(this,{order_id:this.time_order_id,type:0})
				}else if(this.sign == "receipt"){
					timeLimitedReceipt(this,{order_id:this.time_order_id,type:0})
				}
			},
			cancel(){
				this.show = false;
			},
			radioChange(e) {
				this.payType = e;
			},
			payConfirm(){
				//微信支付
				if(this.payType == 'weixin'){
					// #ifdef MP-WEIXIN
					timeLimitedGoPay(this,{pay_type:'wx_mini',order_id:this.time_order_id,type:0})
					// #endif
					// #ifdef APP-PLUS
					WxTimeLimitedGoPay(this,{pay_type:'wx_app',order_id:this.time_order_id,type:0})
					// #endif
				}
			},
		}
	};
</script>
<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.swiper{
		width: 100%;
		height: calc(100vh - var(--window-top));
		padding-bottom: 80rpx;
	}
	.orderItem{
		margin: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}
	.orderStatus{
		display: flex;
		justify-content: space-between;
	}
	.order_no{
		color: #909399;
	}
	.status_txt{
		color: #20cbd4;
	}
	.goodsBox{
		margin-top: 20rpx;
		display: flex;
		align-items: stretch;
		padding-top: 20rpx;
		border-top:0.5rpx solid #E4E7ED;
	}
	.goods_img{
		width: 180rpx;
		height: 180rpx;
		margin-right: 10rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		width: 500rpx;
	}
	.goods_info view{
		margin-top: 10rpx;
	}
	.goods_title{
		font-size: 30rpx;
	}
	.goods_norms{
		font-size: 25rpx;
		color: #909399;
	}
	.price_box{
		display: flex;
		align-items: flex-end;
		margin-bottom: 10rpx;
		height: 50rpx;
	}
	.btn_part{
		display: flex;
		justify-content: flex-end;
	}
	.btn_part view{
		margin-left: 20rpx;
	}
	.footer{
		border-top:0.5rpx solid #E4E7ED;
		padding-top: 10rpx;
		margin-top: 10rpx;
	}
	.footer_info{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 25rpx;
		color: #909399;
		margin-bottom: 10rpx;
	}
	.footer_info view{
		margin-left: 10rpx;
	}
	.slot-content{
		padding: 20rpx 40rpx;
	}
	.payTime{
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}
	.modelPrice{
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
